<template>
	<div class="myrecruitment">
		<el-row style="margin-top: 40px;margin-bottom: 24px;">
			<el-col  class="jobflex">
				<head-top title='我的招聘' style="margin-bottom: 12px;"></head-top>
				<div class="positionsec flexwrap">
					<div class="item posiactive">
						<span class="posiactive">行政助理</span>已收到简历：321份
					</div>
					<div class="item">
						<span>销售助理</span>已收到简历：321份
					</div>
					<div class="item">
						<span>销售助理</span>已收到简历：321份
					</div>
					<div class="item">
						<span>销售助理</span>已收到简历：321份
					</div>
					<div class="item">
						<span>销售助理</span>已收到简历：321份
					</div>
				</div>
				<div class="jlcbx">
					<div class="header_container1">
						<div class="left">简历储藏箱 <span>24/300</span> </div>
						<div class="byjl flex bluecolor" v-show="!isedite">
							<img src="../../../static/image/jianli.png" alt="" class="src">
							查看备用简历
						</div>
						<div class="byjl" style="color: #999999;" v-show="isedite">
							
							注：只能批量删除已浏览简历
						</div>
					</div>
					<div class="row flex-between jobs">
						<jobcomon v-for="(item,index) in joblist" :type='2'  :item="item" :key='index' :isedite='isedite'></jobcomon>

					</div>
					<div class="row" style="justify-content: flex-end;">
						<div class="pagination" style="justify-content: space-between;">
							<span class="plbj" v-if="isedite==false" @click="isedite=true">批量编辑</span>
							<div class="leftedite" v-else><span @click="isedite=false">取消</span><span class="bluecolor">批量移动简历</span><span class="redcolor">批量删除简历</span></div>
							<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next, jumper" :total="total">
							</el-pagination>
						</div>
					</div>


				</div>


			</el-col>
		</el-row>
	</div>
</template>
<script>
	import headTop from '@/components/headTop'
	import jobcomon from '@/components/jobcomon.vue'
	export default {
		data() {
			return {
				joblist: [{}, {}, {}],
				cur_page: 1,
				total: 100,
				isedite:false
			}
		},
		components: {
			headTop,
			jobcomon

		},
		created() {

		},
		methods: {
			// 分页导航
			handleCurrentChange(val) {
				this.cur_page = val;
				this.getList();
			},
		}
	}
</script>
<style lang="less" scoped="scoped">
	.myrecruitment {
		width: 100%;

		.pagination {
			.leftedite {
				font-size: 16px;
				span {
					margin-right: 30px;
					cursor: pointer;
				}
			}

			.plbj {
				cursor: pointer;
				color: #999999;
				font-size: 16px;

			}
		}

		.header_container1 {
			width: 100%;
			color: #333333;
			border-left: 4px solid #226FFF;
			font-weight: bold;
			font-size: 24px;
			display: flex;
			align-items: center;
			padding-left: 20px;
			box-sizing: border-box;
			margin: 60px 0px 30px;

			.left {
				display: flex;
				align-items: baseline;

				span {
					color: #333333;
					font-size: 14px;
					margin-left: 10px;
					margin-right: 60px;
				}
			}

			.byjl {
				font-size: 14px;

				img {
					width: 16px;
					height: 16px;
					margin-right: 10px;
				}
			}
		}

		.positionsec {
			background-color: #FFFFFF;
			padding: 33px 0px 10px 40px;
			box-sizing: border-box;

			.posiactive {
				color: #226FFF !important;
				background: #E8F0FF;
			}

			.item {
				cursor: pointer;
				padding: 0px 10px;
				box-sizing: border-box;
				color: #999999;
				font-size: 14px;
				margin-right: 40px;
				margin-bottom: 23px;
				height: 36px;
				line-height: 36px;

				span {
					color: #333333;
					font-size: 16px;
					margin-right: 10px;
				}
			}
		}
	}
</style>
